<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>当前计数：{{counter}}</h2>
        <!-- <button v-on:click="counter++"> + </button> -->
        <!-- <button v-on:click="counter--"> - </button> -->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
       
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({ 
        el: '#app',
        data: {
            counter:0
        },
        methods: {
            add: function () { 
                if(this.counter < 10) {
                this.counter++;
                console.log('add被执行');
                } else {
                    alert('add,最大了');

                }
             },
            sub: function () { 
             if(this.counter > 0) {
                this.counter--;
                console.log('sub被执行');
             } else {
                 alert('sub,最小了')
             }

             }
        }
    })
</script>
</html>